<template>
  <div style="height: 100%;">
    <a-steps :current="current" size="small">
      <a-step v-for="item in steps" :key="item.title" :title="item.title" />
    </a-steps>
    <a-divider />
    <div class="charts_content">
      <ConfigMessage v-if="current == 0" :form="form" :drawer="drawer" />
      <LineGroup v-if="current == 1" :dataMapping="form.dataMapping" :form="form" />
      <GroupDisplay v-if="current == 2" :display="form.display" :form="form" ref="group_display" />
      <ConfigPreview v-if="current == 3" :display="form.display" :form="form" />
    </div>
  </div>
</template>

<script>
import ConfigMessage from './config_message.vue'
import LineGroup from './datamap/lineGroup.vue'
import ConfigPreview from './display_config/config_preview.vue'
import GroupDisplay from './display/group_display.vue'
import bus from '../../../../components/bus'
  export default {
    props: ["form", 'drawer'],
    components: {
      ConfigMessage,
      LineGroup,
      GroupDisplay,
      ConfigPreview
    },
    data() {
      return {
        current: 0,
        steps: [
          {
            title: '基本信息'
          },
          {
            title: '数据映射'
          },
          {
            title: '显  示'
          },
          {
            title: '显示配置预览'
          }
        ],
      }
    },
    watch: {
      drawer(val){
        if (!val) {
          this.current = 0
        }
      }
    },
    mounted() {
    },
    methods: {
      next_step () {
        if (this.current == 0) {
          if (!this.$children[2].onBasicInfoSubmit()) {
            return
          }  
        }
        if (this.current == 1) {
            if (['line', "group", "area", "bar", "strip"].includes(this.form.type)) {
                let childrenNode = this.$children[2].$children,
                    dataTime = this.$children[2].$children.length,
                    rules = [];
                for (let i = 1; i < dataTime; i++) {
                    rules.push(childrenNode[i].onMapFieldSubmit())
                }
                if (rules.includes(false)) {
                    return
                }
            }
            if (['pie', 'loop', 'map', 'table', 'number'].includes(this.form.type)) {
                if (!this.$children[2].$children[0].onMapFieldSubmit()) {
                    return
                }
            }
            if (['path', 'funnel', 'retention'].includes(this.form.type)) {
              if (!this.$children[2].onVerifyForm()) {
                return
              }
              if (this.form.type == 'funnel') {
                let childrenNode = this.$children[2].$children.slice(2),
                    dataTime = childrenNode.length,
                    rules = [];
                for (let i = 0; i < dataTime; i++) {
                  rules.push(childrenNode[i].onFunnelSubmit())
                }
                if (rules.includes(false)) {
                  return
                }
              }
            }
        }
        if ( this.current == 2 ) {
          let biaoshifu  = false
          bus.$emit('verifyForm',function(val){
              biaoshifu = val  
          })
          if (!biaoshifu) {
              this.$message.error('请填写完整的显示配置')
              return 
          }
        }
        if ( this.current < 4 ) {
            this.current+= 1
        }
        this.$emit('current',this.current)
      },
      up_step () {
          if ( this.current > 0 ) {
              this.current -= 1
          }
          this.$emit('current',this.current)
      }
     },
  }
</script>

<style scoped>
.ant-steps {
  padding: 10px 24px  10px 10px;
}

.charts_content {
  overflow: auto;
  height: calc(100% - 59px);
  padding: 12px;
}
</style>